<template>
  <div class="panel2">
    <div class="titleBar">
      <div v-if="!!icon" class="icon">
        <img :src="resolveImagePath(icon)" alt=""></img>
      </div>
      <div class="title">{{ text }}</div>
      <slot name="headerAction"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  }
})

// 动态拼接图片路径
const resolveImagePath = (path) => {
  return `${import.meta.env.BASE_URL}${path.replace(/^\//, '')}`
}

</script>

<style lang="scss" scoped>
.panel2 {
  border-radius: 8px;
  padding: 2px 10px 10px 10px;
  background-color: #fff;

  .titleBar {
    display: flex;

    .icon {
      flex: 0 0 18px;
      height: 37px;
      line-height: 37px;
      align-items: center;
      display: flex;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .title {
      flex: 1 1 auto;
      padding: 8px;
      font-size: 17px;
      font-weight: 600;
    }
  }
}
</style>